<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <button>按钮5</button>
  <script>
    var btns = document.getElementsByTagName("button");

    // 需求是点击按钮的时候, 输出该按钮的索引号
    // 假如有4个按钮
    /* for (var i = 0; i < btns.length; i++) {
      btns[i].addEventListener("click", function () {
        console.log(i)
      })
    } */
    // 以上代码并不能满足需求, 每次点击按钮的时候输出的都是5
    // 因为输出的i因为没有块级作用域,被for中的i++改变了

    // 闭包解决方法
    /* for (var i = 0; i < btns.length; i++) {
      (function (i) { // 这个i是一个形参
        btns[i].addEventListener("click", function () {
          console.log(i) // 函数里面的i就有作用域了，不会被外面访问到
        })
      })(i) // 这个i是每一次传入的实参
    } */

    // ES6 let定义变量
    for (let i = 0; i < btns.length; i++) {
      btns[i].addEventListener("click", function () {
        console.log(i) // 这里的i就不需要借助function的作用域了!
      })
    }
  </script>
</body>

</html>